<template>
  <div class="z-box">
    <i class="topL"></i>
    <i class="topR"></i>
    <i class="bottomL"></i>
    <i class="bottomR"></i>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ZBox'
}
</script>

<style lang="scss" scoped>
.z-box {
  position: relative;
  background-color: #fff;
  box-shadow: 0px 1px 8px 0px rgba(0, 143, 249, 0.29);
  border-radius: 4px;
  padding: 16px;
}
.topL, .topR, .bottomL, .bottomR {
  width: 16px;
  height: 16px;
  position: absolute;
}
.topL {
  border-top-width: 2px;
  border-top-color: #20AAFF;
  border-top-style: solid;
  border-left-width: 2px;
  border-left-color: #20AAFF;
  border-left-style: solid;
  top: -2px;
  left: -2px;
}
.topR {
  border-top-width: 2px;
  border-top-color: #20AAFF;
  border-top-style: solid;
  border-right-width: 2px;
  border-right-color: #20AAFF;
  border-right-style: solid;
  top: -2px;
  right: -2px;
}
.bottomL {
  border-bottom-width: 2px;
  border-bottom-color: #20AAFF;
  border-bottom-style: solid;
  border-left-width: 2px;
  border-left-color: #20AAFF;
  border-left-style: solid;
  bottom: -2px;
  left: -2px;
}
.bottomR {
  border-bottom-width: 2px;
  border-bottom-color: #20AAFF;
  border-bottom-style: solid;
  border-right-width: 2px;
  border-right-color: #20AAFF;
  border-right-style: solid;
  bottom: -2px;
  right: -2px;
}
</style>